import React,{ Component } from 'react';
import {
	Text,
	StyleSheet,
	View,
	FlatList
} from 'react-native';

import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';


class DataTable extends Component{
	constructor(props){
		super(props);
		this.state = {
			option:{}
		};
	}



	getOption = (data)=>{

		let firstIndex = 0 ;

		let headerData = [];

		let tableData = [];

		for(var i = 0; i < data.length; i++) {

			for(var j = 0; j < data[i].length; j++) {


				if(!isNaN(data[i][j]) || "-" === data[i][j]) {

					firstIndex = i;

					for(var i1 = 0; i1 < firstIndex; i1++) {
						headerData.push(data[i1]);
					}

					for(var i2 = firstIndex ; i2 < data.length; i2++) {
						tableData.push(data[i2]);
					}

					option = {
						headerData:headerData,
						tableData:tableData
					}

					this.setState({ option });
					return;
				};

			}
	    }
	    
	}


    componentDidMount(){
    	this.getOption(this.props.tableData);
    }


    componentWillReceiveProps(nextProps) {
    	this.getOption(nextProps.tableData);
    }


	render(){

		if(this.state.option && this.state.option.headerData){

			return (
				<View style={styles.container}>
			        <Table borderStyle={{borderWidth:0.5}}>
			        	{/*<FlatList
				 	       keyExtractor={(item,index)=>index.toString()}
				           data={this.state.option.headerData}
				    	   renderItem={({item}) => (
			    	   			<Row data={item}  style={styles.head} textStyle={styles.text}/>
			    	   		)}
			           />*/}

			           <Row data={this.state.option.headerData[0]}  style={styles.head} textStyle={styles.text}/>

			          <Rows data={this.state.option.tableData} textStyle={styles.text}/>
			        </Table>
	      		</View> )

		}else{
			return <Text>{"没有数据可显示"}</Text>
		}
	}
}

const styles = StyleSheet.create({	
  container: { 
  	flex: 1, 
  	backgroundColor: '#fff' 
  },
  text: { 
  	margin: 6,
  	textAlign:'center'
  },
  head: { 
  	backgroundColor: '#D5D5D5' 
  },
  tableBorder:{
  	borderWidth:0.5
  }

});

export { DataTable }